<!--
 * @Author: NaturalHulk 2066634567@qq.com
 * @Date: 2024-10-08 09:31:44
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-12-23 17:31:21
 * @FilePath: /xhs-mom-new/src/components/XiaoheComponents/XiaoheDialog/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from 'vue'
const Props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '新增'
  },
  width: {
    type: String || Number,
    default: '70%'
  },
  closeIsShow: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['close'])
// 弹窗状态

// 弹窗是否全屏
const fullscreen = ref(false)

// 弹窗title
const title = ref('新增')
</script>
<template>
  <div class="app-center">
    <!-- 弹窗 -->
    <el-dialog
      center
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :draggable="true"
      destroy-on-close
      :width="Props.width"
      :model-value="Props.dialogVisible"
      :fullscreen="fullscreen"
      :show-close="false"
      @close="emit('close')"
    >
      <div class="dialog-header" v-if="Props.closeIsShow">
        <span class="title">{{ Props.title }}</span>
        <el-icon class="FullScreen pringt" @click="fullscreen = !fullscreen"><FullScreen /></el-icon>
        <el-icon @click.stop="emit('close')" class="pringt"><Close /></el-icon>
      </div>
      <el-divider v-if="Props.closeIsShow" />
      <div class="body">
        <slot name="body"></slot>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.app-center ::v-deep .el-dialog__header {
  padding: 1;
  position: absolute;
  width: 100%;
  height: 50px;
  height: 0;
}

.app-center ::v-deep .el-divider {
  padding: 0;
  margin: 5px;
}
.app-center ::v-deep .el-dialog__body {
  padding: 10px;
}
.dialog-header {
  display: flex;
}
.dialog-header > .title {
  display: flex;
  justify-content: center;
  flex: 2;
}
.dialog-header > .FullScreen {
  margin-right: 10px;
}
.body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
.pringt {
  cursor: pointer;
}
</style>
